<template>
  <div class="">
    <myHeader title="面试题" />
    <myfoot />
    <div class="main" >
        <ul id="main">
          <li v-for="(item ,index) in data">
              <h3 @click="showans(index,item)">题目:{{item.title}}</h3>
              <p class="ans" ref="ans" v-show="false">
                <img class="loading" v-if="showIndex==-1" src="http://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" alt="">
                <span v-else>{{item.consult_text}}</span></p>
          </li>
          <li v-show="more">{{msg}}</li>
        </ul>
    </div>


  </div>
</template>

<script>
import myfoot from "@/components/footer"
import myHeader from "@/components/headerTop"
import {getExact} from "@/API"

export default {
  name: 'HelloWorld',
  data () {
    return {
      data:[],
      page:1,
      more:false,
      msg:"加载中",
      showIndex:-1

    }
  },
  components: {
    myfoot,myHeader
  },
	created() {
    this.getMore()

	},
  mounted() {
    //do something after mounting vue instance
    var that=this
    window.onscroll=function(e){
      //整个文档高度
      var a=document.documentElement.scrollHeight;
      //滚动高度
      var b=document.documentElement.scrollTop || document.body.scrollTop;
      //可视高度
      var c=document.documentElement.clientHeight;
      // console.log(a-b-c)
      if(a-b-c<20&&that.more==false){
        console.log("sss")
        that.more=true
        that.page++;
        that.getMore();
      }
    }
  },
	methods:{
    showans(index){
        let ans=this.$refs.ans;
        console.log(ans.length)
        for(let i=0;i<ans.length;i++){
          ans[i].style.display="none"
        }
        this.showIndex=-1
        console.log(ans)
        setTimeout(()=>{
          this.showIndex=index;
        },1000)

        if(ans[index].style.display=="none"){
          ans[index].style.display="block"
        }else{
          ans[index].style.display="none"
        }

    },
    getMore(){
      this.$store.commit("changeIshow",{data:false})
      getExact(this.page).then((response) => {
        // console.log(response.data.dataList)
          this.$store.commit("changeIshow",{data:true})
        if(response.dataList.length>0){
          this.data=this.data.concat(response.dataList)

          this.more=false

        }else{
            this.msg="我是有底线的"
        }

      })
    }
	},


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

.main{
    width: 100vw;
    overflow: auto;
    li{
      padding: 3px;
        margin: 5px;
        border: 1px solid green;
    }
    .ans,h3{
      padding: 5px;
      text-align: left;
      font-size: 24px;
      border-bottom: 1px solid #ccc;
    }
}
.loading{
  width: 100%;
  height: 50px;
}

</style>
